<template>
  <div class="skeleton-loader" :class="{ 'skeleton-active': active }">
    <!-- 预设骨架屏类型 -->
    <template v-if="preset">
      <!-- 列表骨架屏 -->
      <div v-if="preset === 'list'" class="skeleton-list">
        <div v-for="i in rows" :key="i" class="skeleton-list-item">
          <a-skeleton-avatar :size="avatarSize" />
          <div class="skeleton-list-content">
            <a-skeleton-input :size="titleSize" style="width: 60%" />
            <a-skeleton-input :size="contentSize" style="width: 80%; margin-top: 8px" />
            <a-skeleton-input :size="contentSize" style="width: 40%; margin-top: 4px" />
          </div>
        </div>
      </div>
      
      <!-- 卡片骨架屏 -->
      <div v-else-if="preset === 'card'" class="skeleton-card">
        <div class="skeleton-card-header">
          <a-skeleton-input :size="titleSize" style="width: 40%" />
          <a-skeleton-button :size="buttonSize" />
        </div>
        <div class="skeleton-card-content">
          <a-skeleton-input :size="contentSize" style="width: 100%" />
          <a-skeleton-input :size="contentSize" style="width: 80%; margin-top: 8px" />
          <a-skeleton-input :size="contentSize" style="width: 60%; margin-top: 8px" />
        </div>
        <div class="skeleton-card-actions">
          <a-skeleton-button :size="buttonSize" style="margin-right: 8px" />
          <a-skeleton-button :size="buttonSize" />
        </div>
      </div>
      
      <!-- 表格骨架屏 -->
      <div v-else-if="preset === 'table'" class="skeleton-table">
        <div class="skeleton-table-header">
          <a-skeleton-input 
            v-for="i in columns" 
            :key="i" 
            :size="titleSize" 
            style="width: 100px; margin-right: 16px" 
          />
        </div>
        <div v-for="i in rows" :key="i" class="skeleton-table-row">
          <a-skeleton-input 
            v-for="j in columns" 
            :key="j" 
            :size="contentSize" 
            :style="{ width: getColumnWidth(j), marginRight: '16px' }" 
          />
        </div>
      </div>
      
      <!-- 表单骨架屏 -->
      <div v-else-if="preset === 'form'" class="skeleton-form">
        <div v-for="i in rows" :key="i" class="skeleton-form-item">
          <a-skeleton-input :size="titleSize" style="width: 100px; margin-bottom: 8px" />
          <a-skeleton-input :size="inputSize" style="width: 100%" />
        </div>
        <div class="skeleton-form-actions">
          <a-skeleton-button :size="buttonSize" style="margin-right: 8px" />
          <a-skeleton-button :size="buttonSize" />
        </div>
      </div>
      
      <!-- 统计骨架屏 -->
      <div v-else-if="preset === 'statistic'" class="skeleton-statistic">
        <div v-for="i in columns" :key="i" class="skeleton-statistic-item">
          <a-skeleton-input :size="titleSize" style="width: 80px; margin-bottom: 8px" />
          <a-skeleton-input :size="statisticSize" style="width: 120px; margin-bottom: 4px" />
          <a-skeleton-input :size="contentSize" style="width: 60px" />
        </div>
      </div>
      
      <!-- 图表骨架屏 -->
      <div v-else-if="preset === 'chart'" class="skeleton-chart">
        <div class="skeleton-chart-header">
          <a-skeleton-input :size="titleSize" style="width: 200px" />
        </div>
        <div class="skeleton-chart-content" :style="{ height: chartHeight }">
          <div class="skeleton-chart-placeholder">
            <div class="skeleton-chart-bars">
              <div v-for="i in 8" :key="i" class="skeleton-chart-bar" :style="{ height: `${Math.random() * 80 + 20}%` }" />
            </div>
          </div>
        </div>
      </div>
    </template>
    
    <!-- 自定义骨架屏 -->
    <template v-else>
      <a-skeleton
        :active="active"
        :loading="loading"
        :avatar="avatar"
        :paragraph="paragraph"
        :title="title"
        :round="round"
      >
        <slot />
      </a-skeleton>
    </template>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

interface SkeletonLoaderProps {
  preset?: 'list' | 'card' | 'table' | 'form' | 'statistic' | 'chart'
  active?: boolean
  loading?: boolean
  rows?: number
  columns?: number
  avatar?: boolean | object
  paragraph?: boolean | object
  title?: boolean | object
  round?: boolean
  avatarSize?: 'large' | 'small' | 'default'
  titleSize?: 'large' | 'small' | 'default'
  contentSize?: 'large' | 'small' | 'default'
  buttonSize?: 'large' | 'small' | 'default'
  inputSize?: 'large' | 'small' | 'default'
  statisticSize?: 'large' | 'small' | 'default'
  chartHeight?: string
}

const props = withDefaults(defineProps<SkeletonLoaderProps>(), {
  active: true,
  loading: true,
  rows: 3,
  columns: 4,
  avatar: false,
  paragraph: true,
  title: true,
  round: false,
  avatarSize: 'default',
  titleSize: 'default',
  contentSize: 'small',
  buttonSize: 'default',
  inputSize: 'default',
  statisticSize: 'large',
  chartHeight: '300px',
})

// 计算表格列宽
const getColumnWidth = (columnIndex: number) => {
  const widths = ['120px', '100px', '80px', '150px', '100px', '80px']
  return widths[columnIndex - 1] || '100px'
}
</script>

<style scoped>
.skeleton-loader {
  padding: 16px;
}

.skeleton-active {
  animation: skeleton-loading 1.4s ease-in-out infinite;
}

/* 列表骨架屏 */
.skeleton-list-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
  padding: 16px;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
}

.skeleton-list-content {
  flex: 1;
}

/* 卡片骨架屏 */
.skeleton-card {
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  padding: 16px;
}

.skeleton-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0f0f0;
}

.skeleton-card-content {
  margin-bottom: 16px;
}

.skeleton-card-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 12px;
  border-top: 1px solid #f0f0f0;
}

/* 表格骨架屏 */
.skeleton-table-header {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 2px solid #f0f0f0;
  margin-bottom: 8px;
}

.skeleton-table-row {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f5f5f5;
}

/* 表单骨架屏 */
.skeleton-form-item {
  margin-bottom: 24px;
}

.skeleton-form-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 16px;
  border-top: 1px solid #f0f0f0;
}

/* 统计骨架屏 */
.skeleton-statistic {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
}

.skeleton-statistic-item {
  text-align: center;
  padding: 24px;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
}

/* 图表骨架屏 */
.skeleton-chart-header {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0f0f0;
}

.skeleton-chart-content {
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.skeleton-chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 100%;
  width: 80%;
}

.skeleton-chart-bar {
  flex: 1;
  background: linear-gradient(90deg, #f0f0f0 25%, #e6f7ff 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.4s ease-in-out infinite;
  border-radius: 2px;
  min-height: 20px;
}

/* 骨架屏动画 */
@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* 暗黑模式适配 */
[data-theme="dark"] .skeleton-list-item,
[data-theme="dark"] .skeleton-card,
[data-theme="dark"] .skeleton-statistic-item,
[data-theme="dark"] .skeleton-chart-content {
  border-color: #303030;
  background: rgba(255, 255, 255, 0.02);
}

[data-theme="dark"] .skeleton-card-header,
[data-theme="dark"] .skeleton-card-actions,
[data-theme="dark"] .skeleton-table-header,
[data-theme="dark"] .skeleton-form-actions,
[data-theme="dark"] .skeleton-chart-header {
  border-color: #303030;
}

[data-theme="dark"] .skeleton-table-row {
  border-color: #262626;
}

[data-theme="dark"] .skeleton-chart-bar {
  background: linear-gradient(90deg, #303030 25%, #1f1f1f 50%, #303030 75%);
  background-size: 200% 100%;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .skeleton-loader {
    padding: 12px;
  }
  
  .skeleton-list-item {
    padding: 12px;
    margin-bottom: 12px;
  }
  
  .skeleton-card {
    padding: 12px;
  }
  
  .skeleton-statistic {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .skeleton-statistic-item {
    padding: 16px;
  }
}
</style>